<template>
	<view class="content">
		<view class="bac">
			
		</view>
		<uniNavBar name="我报名的活动" nextFlag="flase" rightText="flase"></uniNavBar>
		<custom-tarbar :selected="1"></custom-tarbar>

		<view class="home"  v-if="activityListData.length">
			<view class="bac"></view>
			
			<view class="uli" v-for="(item,idx) in activityListData" :key="idx">
				<view class="title">
					<text>{{item.activity.title}}</text>
					<text class="more" @tap="goInfo(item.activity.id)">查看活动</text> 
				</view>
				<view class="date">活动日期：{{item.activity.start_date}}——{{item.activity.end_date}}</view>
				<view class="items" v-for="(i,j) in item.tasks" :key="j">
					<image></image>
					<view class="container">
						<view class="dask">
							{{i.title}}：{{i.subtitle}}
							<template v-if="i.type==1">
								（
								<text>{{item.pList[0]}}</text>
								）
							</template>
						</view>
						<view class="dask-date">开始日期：{{i.start_time}}</view>
						<view class="integral">积分+{{i.done_count}}</view>
					</view>
					<view class="flex-btn">
						<view :class="i.aState?'btn endState':'btn'" @click="toStudy(i.type,i.id,i.upload_type,item.activity.id)">{{i.aState?'已完成':i.subtitle}}</view>
					</view>
				</view>
			</view>
		
		
		</view>
		<view class="null" v-if="!activityListData.length">
			<text>当前没有参加活动，赶紧去报名吧！！！</text>
		</view>
	</view>
</template>

<script>
import customTarbar from '@/compontents/custom-tarbar.vue';
import {activityList,post} from '@/utils/interface.js'
export default {
	components: {
		'custom-tarbar': customTarbar
	},
	data(){
		return {
			activityListData:[],
			upload_type:""
		}
	},
	methods: {
		toStudy(type,id,u,a_id) {
		switch(type){
			case 1:
			uni.navigateTo({
				url: '/pages/me/study?taskId='+id+'&activityId='+a_id
			});
			break;
			case 2:
			uni.navigateTo({
				url: '/pages/me/paper?taskId='+id
			});
			break;
			case 3:
			uni.navigateTo({
				url: '/pages/me/upload?taskId='+id+'&upload_type='+u
			});
			break;
			case 4:
			uni.navigateTo({
				url: '/pages/me/display?id='+id+'&upload_type='+this.upload_type
			});
			break;
		}
			
		},
		goInfo(id){
			uni.navigateTo({
				url:"../sign/activityDetails?id="+id
			})
		},
		toupload() {
			uni.navigateTo({
				url: '/pages/me/upload'
			});
		},
		toDisplay(id) {
			uni.navigateTo({
				url: '/pages/me/display?id='+id
			});
		},
		answer(){
			
			uni.navigateTo({
				url: '/pages/me/paper'
			});
		},
		// 获取我参与的活动列表
		getMyJoinActivity(){
			activityList({method:"activities.my_activities",token:uni.getStorageSync('userToken')}).then(res=>{
				res.data.list.map(item=>{
					item.pList = []
					for(var i in item.progress){
						if(item.progress[i].read){
							item.progress[i].p = (item.progress[i].done.length+'/'+item.progress[i].read.length)
							console.log(item.progress[i].p)
							item.pList.push(item.progress[i].p)
						}
					}
					item.list_done.done.map(im=>{
						
						item.tasks.map(it=>{
							if(im==it.id){
								it.aState = true
							}
							
						})
					})
					item.tasks.map(item=>{
						if(item.type==3){
							this.upload_type = item.upload_type
							console.log(this.upload_type)
						}
					})
				})
				this.activityListData = res.data.list
				
			})
		}
	},
	onShow(){
		this.getMyJoinActivity()
	}
};
</script>

<style>
	.null{
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999;
		font-size: 30upx;
		height: 400upx;
		margin-top: 200upx;
		width: 100%;
	}
.home {
	width: 100%;
	position: relative;
}
.content {
	width: 100%;
	padding-top: 88upx;
}
.uli {
	width: 693upx;
	background: rgba(255, 254, 255, 1);
	box-shadow: 0px 3px 32upx 0px rgba(0, 0, 0, 0.19);
	border-radius: 20upx;
	margin: auto;
	overflow: hidden;
	margin-bottom: 28upx;
	position: relative;
	
}
.title {
	height: 37upx;
	font-size: 36upx;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: rgba(39, 42, 41, 1);
	margin-left: 33upx;
	margin-top: 40upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.date {
	font-size: 19upx;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: rgba(175, 175, 175, 1);
	line-height: 78upx;
	margin-left: 33upx;
}
.items {
	display: flex;
	align-items: center;
	position: relative;
}
.items image {
	width: 70upx;
	height: 70upx;
	background: rgba(236, 63, 28, 1);
	border-radius: 50%;
	margin-left: 57upx;
	margin-right: 20upx;
}
.content {
	flex: 1;
	display: flex;
	align-items: center;
}

.dask {
	color: #272a29;
	line-height: 60upx;
	font-size: 24upx;
}
.dask-date {
	color: #999999;
	font-size: 20upx;
}
.dask text{
	color: #FFA303;
}
.integral {
	color: #FFA303;
	font-size: 20upx;
	line-height: 60upx;
}
.btn {
	width: 95upx;
	height: 34upx;
	background: rgba(236, 63, 28, 1);
	color: #ffffff;
	font-size: 20upx;
	line-height: 34upx;
	text-align: center;
	border-radius: 20upx;
	margin: auto;
}
.endState{
	background:linear-gradient(0deg,rgba(142,142,142,1),rgba(229,229,229,1));
	box-shadow:0px 5px 9px 0px rgba(117,117,117,0.29);
}
.btn-title {
	color: #6d6d6d;
	font-size: 24upx;
}
.gray{
	background:linear-gradient(0deg,rgba(142,142,142,1),rgba(229,229,229,1));
	box-shadow:0px 5px 9px 0px rgba(117,117,117,0.29);
}
.bac {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 300upx;
	border-bottom-left-radius: 20upx;
	border-bottom-right-radius: 20upx;
	background: linear-gradient(131deg, rgba(210, 0, 0, 1), rgba(253, 104, 47, 1));

}
.flex-btn {
	text-align: center;
	position: absolute;
	right: 36upx;
}
.btn-title {
	transform: scale(0.5);
	font-size: 20upx;
}

.title text {
	margin-right: 20upx;
	font-size: 36upx;
	color: #272A29;
}
.title .more {
	margin-right: 20upx;
	color: #5B5B5B;
	font-size: 24upx;
}

</style>
